<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #box{
        width: 100%;
        height: 730px;
        background: rgba(0, 0, 0, 0.5);
        padding-top: 80px;
    }
    #boxFox{
        margin: auto;
        width: 1000px;
        height: 580px;
        background: #f5f5f5;
        border-radius: 10px;
        position: relative;

    }
    .boxZuo{
        width:180px;
        height: 580px;
        border-radius: 10px 0 0 10px;
        background: #fff;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
    }
    .boxYou{
      position: relative;
        float: left;
        
    }
    .boxYouOne{
        width: 770px;
        height: 510px;
        background: #f5f5f5;
        margin-left: 15px;
        overflow-y: auto;
    }
    .boxYouTwo{
        width:765px;
        height: 50px;
        background: #fff;
        border-radius: 10px;
       position: absolute;
        margin-left: 20px;
        margin-top: 10px;

    }
    .boxZuoIpt
    {
        width: 180px;
        height: 30px;
        border-radius: 10px;
        background:#f0f1f4 ;
        margin-top: 30px
    }
    .boxZuoIpt input{
        width: 150px;
        height: 18px;
        margin-top: 6px;
        float: left;
        margin-left: 5px;
        border: none;
        outline: none;
        background: #f0f1f4;
       
        
    }
   .boxZuoIpt img{
float: left;
margin-top: 7px;
    }
    .boxZuoUI ul{
        border-bottom: 1px solid #e5e5e5;
        margin-top: 5px;
      padding-bottom: 4px;
    }
    .boxZuoUI ul li{
        color: #4c4c4c;
        line-height: 35px;

    }
    .boxZuoUI ul li span
    {
float: right;
/* margin-right: 10px; */
font-size: 13px;  
 
    }
    .img1{
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }
    .clear{
        width: 170px;
    }
    .img2{
        width: 180px;
        position: absolute;
        margin-top: 25px;
    }
    .boxYouOneLi{
        width: 770px;
        height: 60px;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .boxYouOneLi div{
        display: flex;
        justify-content: space-between;
        margin-top: 5px;

    }
    .boxYouOneLi div div:nth-child(1){
margin-left: 10px;
    }
    .boxYouOneLi div div:nth-child(2){
margin-right: 10px;
    }   
    .ipt2{
    background: none;
    border: none;
    outline: none;
    margin-left: 5px;
    font-size: 19px;
    }
       .img4{
        margin-left: 5px;
       }
       .img5{
        width: 15px;
        height: 15px;
        margin-left: 28px;
        margin-top: 5px;
       }
      .boxYouTwo div{
        margin-top: 15px;
        margin-left: 15px;
      }
      .boxYouTwo div img{
        float: left;
      }
      .boxYouTwo div input{
        float: left;
        margin-left: 5px;
        border: none;
        outline: none;
        margin-top: 2px;
      }
      #uls{
        width: 180px;
        height: 335px;
        overflow-y: auto;
        /* background: red; */
        border: none;
        
      }
      .img11{
        width: 13px;
        height: 13px;
        margin-right: 5px;
    }
      .daiban{
        width: 120px;
        border: none;
        outline: none;
        background: none;
      }
      ul li:hover{
        /* padding: 2px; */
        background: #e7f4ff;
        border-radius: 10px;
      }
   .shanchu{
    width: 20px;
    height: 25px;
    margin-top: 5px;
   }
</style>
<body>
    <div id="app">
<div id="box">
    <div id="boxFox">
        <!-- 左 -->
        <div class="boxZuo">
            <div class="boxZuoIpt">
                <input placeholder="Search" type="text">
<img src="./imgs/1_14.gif" alt="">
            </div>
            <!-- 左边列表 -->
            <div class="boxZuoUI">
             <ul>
                <li @click="htmlText('所有')"><img class="img1" src="./imgs/2_03.gif" alt="">所有<span>111</span></li>
                <li @click="htmlText('今天')"><img class="img1" src="./imgs/1_18.gif" alt="">今天<span>1</span></li>
                <li @click="htmlText('最近7天')"><img class="img1" src="./imgs/1_21.gif" alt="">最近7天<span>1</span></li>
             </ul>
             <div class="clear" ></div>
             <ul id="uls">
                <li v-for="(item, index) in items" :key="index" v-model="item" @mouseenter="showDeleteButton(index)" @mouseleave="hideDeleteButton(index)">
                    <img class="img11" src="./imgs/1_23.gif" alt="">
                    <input class="daiban" type="text" placeholder="待办事项">
                    <span v-show="!showDelete[index]">{{ item }}</span>
                    <span v-show="showDelete[index]" @click="deleteItem(index)" class="delete-btn"><img class="shanchu" src="./imgs/4_05.gif" alt=""></span>
                </li>
            </ul>
             <!-- <ul id="uls">
                <li v-for="(item, index) in items" :key="index" v-model="item">
                    <img class="img11" src="./imgs/1_23.gif" alt="">
                    <input class="daiban" type="text" placeholder="待办事项">
                    <span>{{ item }}</span>
                </li>
            </ul> -->
        </div>
       <div>
        <img class="img2" @click="addListItem" src="./imgs/3_03.gif" alt="">
       </div>
       
    </div>
     <!-- 右 -->
     <div class="boxYou">
        <div class="boxYouOne">
            <h3 style="line-height: 30px;">{{ labelText }}</h3>
<!-- 列表 -->
<div class="boxYouOneLi" v-for="(task, index) in tasks" :key="index">
    <div>
        <div><input type="checkbox"><input class="ipt2" type="text" v-model="task"></div>
        <div><img class="img4" src="./imgs/4_03.gif" alt=""><img class="img4" src="./imgs/4_05.gif" alt=""></div>
    
    </div>
<div><img class="img5" src="./imgs/5_03.gif" alt=""></div>
</div>

        </div>
        <div class="boxYouTwo">
            <div>
                <img src="./imgs/1_26.gif" alt=""><input type="text" v-model="newTask" @blur="addTask"  placeholder="添加任务">

            </div>
        </div>
    </div>
</div>
    </div>
    <script>
        new Vue({
        el: '#app',
        data: {
            // 左边的列表
            items: ['0'], 
            // 右边的列表
            tasks: [], 
            task: '{{task}}',
            newTask: '' ,
            showDelete: [] ,
            labelText: '所有' // 初始文本
        },
        methods: {
            // 更新文本内容
        htmlText: function(text) {
            this.labelText = text;
        },
        //     // 左边的列表
        //     addListItem: function() {
        //         this.items.push('0'); // 在待办事项列表末尾添加一个空项
        //     },
        //   // 添加任务方法
        // addTask: function() {
        //     if (this.newTask.trim() !== '') {
        //         this.tasks.push(this.newTask.trim()); // 将新任务添加到右边任务列表
        //         this.taskDetails.push(''); // 在左边任务详情列表中添加空字符串作为初始任务详情
        //         this.newTask = ''; // 清空输入框内容
        //     }
        // }
        addListItem: function() {
            this.items.push('0');
            this.showDelete.push(false);
        },
        addTask: function() {
            if (this.newTask.trim() !== '') {
                this.tasks.push(this.newTask.trim());
                this.newTask = '';
            }
        },


// 显示隐藏
        showDeleteButton: function(index) {
        this.$set(this.showDelete, index, true); 
    },
    hideDeleteButton: function(index) {
        this.$set(this.showDelete, index, false); 
    },




        deleteItem: function(index) {
            this.items.splice(index, 1);
            this.tasks.splice(index, 1); 
            this.showDelete.splice(index, 1); 
        }
    },
    created: function() {
        this.items.forEach(() => {
            this.showDelete.push(false);
        });
        }
    });
    </script>
</body>
</html>